<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Fullpage.js练习</title>
  <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.2/css/bootstrap.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/4.0.12/fullpage.css"
    integrity="sha512-c2/xySTiUmIa2PzQAnKZVYi2+aJmyaI6rweK5GCL1HbHx70/Zub0RhYPy5RFbJsStRo+HTForawyFBgBp6btJA=="
    crossorigin="anonymous" referrerpolicy="no-referrer" />
  <style>
    #section1 {
      background-image: url(resource/img/1.png);
      background-size: 100% 100%;
    }

    #section2 {
      background-color: rgba(255, 228, 196, 0.648);
    }

    #section1 h1 {
      text-align: center;
      margin: 50px 0;
      font-family: 'Courier New', Courier, monospace;
      font-weight: 2500;
      color: rgb(170, 163, 82);


      text-shadow: 3px 3px 5px rgb(1, 1, 1);
      ;
      line-height: 8;
      font-size: 70px;

    }


    #section2 .layer {
      position: absolute;
      z-index: 4;
      width: 100%;
      left: 0;
      top: 43%;

      /*
		* Preventing flicker on some browsers
		* See http://stackoverflow.com/a/36671466/1081396  or issue #183
		*/
      -webkit-transform: translate3d(0, 0, 0);
      -ms-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }

    .layer h1 {
      color: white;
      text-align: center;
      font-size: 72px;
      background-color: #335e3295;
      line-height: 2;
    }

    .list-unstyled {
      list-style: none;
    }

    #myMenu {
      position: fixed;
      right: 40px;
      top: 20%;
      z-index: 999;
    }

    #myMenu a {
      color: #000;
      text-decoration: none;
      line-height: 2;
    }

    #section2 h1 {
      font-family: 'Courier New', Courier, monospace;
      font-weight: 1500;
      color: rgb(79, 76, 47);
      text-align: center;

      text-shadow: 3px 3px 5px rgb(195, 202, 157);
      ;
      line-height: 4;
    }

    p {
      font-size: 18px;
      text-align: justify;
      line-height: 2.5;
    }
  </style>
</head>

<body>
  <ul id="myMenu" class="list-unstyled">
    <li data-menuanchor="firstpage" class="active">
      <a href="#firstpage">返回首页</a>
    </li>
    <li data-menuanchor="secondpage">
      <a href="#secondpage">粮画艺人</a>
    </li>
    <li data-menuanchor="thirdpage">
      <a href="#thirdpage">粮画欣赏</a>
    </li>
    <li data-menuanchor="fourthpage">
      <a href="#fourthpage">粮艺空间</a>
    </li>
  </ul>
  <div id="fullpage">
    <div class="section" id="section1">
      <h1>走进粮画艺人，观赏粮画艺术</h1>
      <ul class="flex-box animate__animated animate__slideInUp">
        <li><a href="01-index.html">平时作业</a></li>

        <li><a href="02-css.html">期末作业</a></li>


      </ul>

    </div>
    <div class="section" id="section2">


      <div class="container">
        <h1>粮画艺人——潘德贵</h1>
        <div class="row">
          <div class="col">
            <img src="resource\img\picture5.jpg" alt="">
          </div>
          <div class="col">
            <p>潘德贵，四川省绵阳市市级非物质文化遗产保护项目鑫田粮艺代表性传承人，涪城区丰谷镇粮站的下岗职工，国家和省市民间文艺家协会会员，四川省“民间工艺百家”、绵阳市高级民间工艺师。</p>
            <p>上世纪八十年代，潘德贵退伍后进入丰谷粮站工作，当时，粮站里有老师傅在用粮食粘贴画像，他很感兴趣，便利用业余时间“拜师学艺”，走进了五谷杂粮斑斓的世界中。

            </p>

            <p>
              2000年，源于对粮食的喜爱，潘德贵开始了专业的粮食画之路，并在丰谷镇上建立了“鑫田粮艺”坊，用大自然最本真的五谷绘就了一幅幅艺术佳品，在传承的基础上又大胆地融合现代元素，使得这一传统而古老的民间工艺成为我市一朵亮丽的奇葩。
            </p>
            <p>此外，他还租用了原丰谷粮站一个400多平米的闲置旧仓库，改造成了鑫田粮艺传习所和农耕文明博览馆。</p>
          </div>


        </div>
      </div>
      <div class="section" id="section3">


        Some section</div>

      <div class="section" id="section4">Some section</div>
    </div>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/4.0.12/fullpage.min.js"
      integrity="sha512-2N6afhHcaOPaBztibhzvEp9MBtXoG+6YQ5AkllMJKHrZKUUiHHmIc1bEafMDjG+LnTtSIYjaKdg2BdZqqZkkBQ=="
      crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script>
      $(document).ready(function () {
        //initialising fullpage.js in the jQuery way
        $("#fullpage").fullpage({
          anchors: ["firstpage", "secondpage", "thirdpage", "forthpage"],
          menu: "#myMenu",
          credits: null,
          //   afterRender: function () {
          //     var pluginContainer = this;
          //     alert("DOM结构已完成");
          //   },
          afterLoad: function (origin, destination, direction, trigger) {
            console.log(origin, destination, direction, trigger);
            if (destination.anchor == "firstpage") {
              $("#myMenu").hide();
            } else {
              $("#myMenu").show();
            }
            if (destination.anchor == "secondpage") {
              $("#myMenu a").css({ color: "white" });
            } else {
              $("#myMenu a").css({ color: "black" });
            }
          },
        });
      });
    </script>
</body>

</html>